
<template>
  <div>
    <el-row :gutter="16" style="margin-left: 0; margin-right: 0; margin-top: 20px">
      <el-col :xs="24" :sm="12" :md="8" class="mb-4">
        <div class="statistic-card">
          <div style="display: flex; align-items: flex-start; height: 100%">
            <!-- 左侧图标 -->
            <div style="display: flex; align-items: center; justify-content: center; height: 100%; padding-left: 70px">
              <el-icon class="sun-icon" style="font-size: 42px; margin-right: 12px; color: #FFA500;"><Sunny /></el-icon>
            </div>
            <!-- 右侧内容 -->
            <div style="flex: 1; align-items: center; height: 100%; padding-left: 100px;
            display: flex;               /* 关键 1 */
            flex-direction: column;      /* 关键 2 */
            justify-content: center;     /* 关键 3：垂直居中 */">
              <el-statistic :value="9">
                <template #title>
                  <div style="display: inline-flex; align-items: center; ">
                    日活跃用户数
                    <el-tooltip
                        effect="dark"
                        content="一天内登录该网站的用户数"
                        placement="top">
                      <el-icon style="margin-left: 4px" :size="12"><Warning /></el-icon>
                    </el-tooltip>
                  </div>
                </template>
              </el-statistic>

              <div class="statistic-footer">
                <div class="footer-item">
                  <span>较昨天</span>
                  <span class="green">
            24%
            <el-icon><CaretTop /></el-icon>
          </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" class="mb-4">
        <div class="statistic-card">
          <div style="display: flex; align-items: flex-start; height: 100%">
            <!-- 左侧图标 -->
            <div style="display: flex; align-items: center; justify-content: center; height: 100%; padding-left: 70px">
              <el-icon class="moon-icon" style="font-size: 42px; margin-right: 12px; color: #409EFF;"><Moon /></el-icon>
            </div>
            <!-- 右侧内容 -->
            <div style="flex: 1; align-items: center; height: 100%; padding-left: 100px;
            display: flex;               /* 关键 1 */
            flex-direction: column;      /* 关键 2 */
            justify-content: center;     /* 关键 3：垂直居中 */">
              <el-statistic :value="34">
                <template #title>
                  <div style="display: inline-flex; align-items: center; ">
                    月活跃用户数
                    <el-tooltip
                        effect="dark"
                        content="一月内登录该网站的用户数"
                        placement="top">
                      <el-icon style="margin-left: 4px" :size="12"><Warning /></el-icon>
                    </el-tooltip>
                  </div>
                </template>
              </el-statistic>

              <div class="statistic-footer">
                <div class="footer-item">
                  <span>较上月</span>
                  <span class="red">
            12%
            <el-icon><CaretBottom /></el-icon>
          </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" class="mb-4">
        <div class="statistic-card">
          <div style="display: flex; align-items: flex-start; height: 100%">
            <!-- 左侧图标 -->
            <div style="display: flex; align-items: center; justify-content: center; height: 100%; padding-left: 70px">
              <el-icon class="user-icon" style="font-size: 42px; margin-right: 12px; color: #67C23A;"><User /></el-icon>
            </div>
            <!-- 右侧内容 -->
            <div style="flex: 1; align-items: center; height: 100%; padding-left: 100px;
            display: flex;               /* 关键 1 */
            flex-direction: column;      /* 关键 2 */
            justify-content: center;     /* 关键 3：垂直居中 */">
              <el-statistic :value="4">
                <template #title>
                  <div style="display: inline-flex; align-items: center; ">
                    新注册用户数
                  </div>
                </template>
              </el-statistic>

              <div class="statistic-footer">
                <div class="footer-item">
                  <span>较昨天</span>
                  <span class="green">
            16%
            <el-icon><CaretTop /></el-icon>
          </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 折线图容器 -->
    <el-row style="padding-top:100px">
      <el-col :span="24">
        <div id="main" style="height:400px;"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import {
  ArrowRight,
  CaretBottom,
  CaretTop,
  Warning,
} from '@element-plus/icons-vue'
import { onMounted } from 'vue'
import * as echarts from 'echarts'
import axios from 'axios'

/* ========== 1. 原始 1-8 月数据 ========== */
const months = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']

const raw = {
  daily:  [0,0,0,0,0,0,0,0,34],   // 单位：万
  monthly:[0,0,0,0,0,0,0,0,34],
  newReg: [0,0,0,0,0,0,0,0,34],
  male:   [0,0,0,0,0,0,0,0,20],
  female: [0,0,0,0,0,0,0,0,14],
}

/* ========== 2. 自动补全 9-12 月 ========== */
function forecast(arr:number[], count:number):number[]{
  const len = arr.length
  const last = arr[len-1]
  const trend = (last - arr[len-2]) / len           // 平均月增
  const res = [...arr]
  for(let i=1;i<=count;i++){
    const noise = (Math.random()-0.5)*last*0.02   // ±2% 随机
    res.push(+(last + trend*i + noise).toFixed(1))
  }
  return res
}

const daily = forecast(raw.daily,3)
const monthly=forecast(raw.monthly,3)
const newReg=forecast(raw.newReg,3)

// 男女保持比例，总和≈monthly
const male   = forecast(raw.male,3).map((v,i)=>
    +(v*(monthly[8+i]/ (raw.male[7]+raw.female[7]) )).toFixed(0) )
const female = monthly.map((v,i)=> +(v - male[i]).toFixed(0) )

/* ========== 3. ECharts 配置 ========== */
const option: echarts.EChartsOption = {
  title:{ text:'2025 年用户数据趋势', left:'center', padding: [0, 0, 20, 0] },
  tooltip:{ trigger:'axis', axisPointer:{ type:'cross' } },
  legend:{
    data:['日活跃用户数','月活跃用户数','新注册用户数','男用户数','女用户数'],
    top:32
  },
  grid:{ left:'3%', right:'4%', bottom:'3%', containLabel:true },
  toolbox:{ feature:{ saveAsImage:{} } },
  xAxis:{ type:'category', boundaryGap:false, data:months },
  yAxis:[ {type:'value', name:'单位：人'} ],
  series:[
    {name:'日活跃用户数', type:'line', data:daily, smooth:true },
    {name:'月活跃用户数', type:'line', data:monthly, smooth:true },
    {name:'新注册用户数', type:'line', data:newReg, smooth:true },
    {name:'男用户数', type:'line', data:male, smooth:true },
    {name:'女用户数', type:'line', data:female, smooth:true }
  ]
}

/* ========== 4. 挂载 ========== */
onMounted(()=>{
  const chart = echarts.init(document.getElementById('main')!)
  chart.setOption(option)
  window.addEventListener('resize', ()=>chart.resize())
})

//从后端拿数据
// const months = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
//
// /* ---------- 预测函数 ---------- */
// function forecast(arr:number[], count:number):number[]{
//   const len = arr.length, last = arr[len-1], trend = (last - arr[len-2])/len
//   const res = [...arr]
//   for(let i=1;i<=count;i++){
//     const noise = (Math.random()-0.5)*last*0.02
//     res.push(+(last + trend*i + noise).toFixed(1))
//   }
//   return res
// }
//
// /* ---------- 拉数据 + 画图 ---------- */
// async function loadChart() {
//   // 1. 取 1-8 月真实数据
//   const { data:raw } = await axios.get('/api/user-trend')
//
//   // 2. 补全 9-12 月
//   const daily  = forecast(raw.daily,4)
//   const monthly= forecast(raw.monthly,4)
//   const newReg = forecast(raw.newReg,4)
//   const male   = forecast(raw.male,4).map((v,i)=>
//       +(v*(monthly[8+i]/(raw.male[7]+raw.female[7]))).toFixed(0))
//   const female = monthly.map((v,i)=> +(v - male[i]).toFixed(0))
//
//   // 3. 喂给 ECharts
//   const option: echarts.EChartsOption = {
//     title:{ text:'2025 年用户数据趋势', left:'center' },
//     tooltip:{ trigger:'axis', axisPointer:{ type:'cross' } },
//     legend:{
//       data:['日活跃用户数','月活跃用户数','新注册用户数','男性用户数','女性用户数'],
//       top:32
//     },
//     grid:{ left:'3%', right:'4%', bottom:'3%', containLabel:true },
//     toolbox:{ feature:{ saveAsImage:{} } },
//     xAxis:{ type:'category', boundaryGap:false, data:months },
//     yAxis:[ {type:'value', name:'单位：万'} ],
//     series:[
//       {name:'日活跃用户数', type:'line', data:daily,  smooth:true },
//       {name:'月活跃用户数', type:'line', data:monthly,smooth:true },
//       {name:'新注册用户数', type:'line', data:newReg, smooth:true },
//       {name:'男性用户数',     type:'line', data:male,   smooth:true },
//       {name:'女性用户数',     type:'line', data:female,smooth:true }
//     ]
//   }
//   const chart = echarts.init(document.getElementById('main')!)
//   chart.setOption(option)
//   window.addEventListener('resize', ()=>chart.resize())
// }
//
// onMounted(loadChart)

</script>

<style scoped>

/* 公共过渡 */
.sun-icon,
.moon-icon,
.user-icon {
  transition: all 0.3s ease;
  padding: 8px;
  border-radius: 8px;
  background-color: transparent;
}

/* 悬浮卡片时各自变色 */
.statistic-card:hover .sun-icon {
  color: white !important;
  background-color: #FFA500;
}

.statistic-card:hover .moon-icon {
  color: white !important;
  background-color: #409EFF;
}

.statistic-card:hover .user-icon {
  color: white !important;
  background-color: #67C23A;
}

:global(h2#card-usage ~ .example .example-showcase) {
  background-color: var(--el-fill-color) !important;
}

.el-statistic {
  --el-statistic-content-font-size: 28px;
}

.statistic-card {
  height: 100%;
  padding: 20px;
  border-radius: 4px;
  background-color: var(--el-bg-color-overlay);
  text-align: center;
  border: 2px solid var(--el-border-color-light, #dcdfe6);
  transition: border-color 0.3s, box-shadow 0.3s;
}

.statistic-card:hover {
  border-color: var(--el-color-primary);   /* 主题色 */
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
}

.statistic-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--el-text-color-regular);
  margin-top: 16px;
}

.statistic-footer .footer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.statistic-footer .footer-item span:last-child {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}

.green {
  color: var(--el-color-success);
}
.red {
  color: var(--el-color-error);
}
</style>
